<template>
	<div>
		<div class="grid" v-show="isChangeAddr == false">
			<el-input
				v-model="value"
				class="field"
				readonly
				placeholder="请输入详细地址"
			/>

			<el-button type="primary" @click="isChangeAddr = true"
				>修改地址</el-button
			>
		</div>
		<div
			class="grid"
			v-show="isChangeAddr"
			style="grid-template-columns: 5fr 2fr auto"
		>
			<Address ref="addressRef" />
			<el-input v-model="selfAddress" placeholder="请输入详细地址" />
			<div>
				<el-button type="primary" @click="onChangeAddr">确认</el-button>
				<el-button @click="isChangeAddr = !1">取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import Address from '@/views/components/address'

export default {
	props: {
		value: String
	},
	data() {
		return {
			selfAddress: '',
			isChangeAddr: false
		}
	},
	watch: {
		value(value) {
			console.log(value)
		}
	},
	mounted() {},
	methods: {
		onChangeAddr() {
			this.$emit(
				'input',
				this.$refs.addressRef.getStringValue({ split: '' }) + this.selfAddress
			)
			this.isChangeAddr = false
		}
	},
	components: { Address }
}
</script>

<style lang="scss" scoped="scoped">
.grid {
	display: grid;
	align-items: center;
	gap: 12px;
	grid-template-columns: 1fr auto;
}
</style>
